<template>
  <div class="index">
    <div class="slider-show">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in viewPager" :key="item">
          <h3 class="medium">
            <el-image :src="item" fit="scale-down"></el-image>
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <album-one>
    </album-one>
  </div>
</template>

<script>
import banner1 from '../assets/banners/banner1.png';
import banner2 from '../assets/banners/banner2.png';
import banner3 from '../assets/banners/banner3.png';
import AlbumOne from "@/components/AlbumOne";

export default {
  name: "Index",
  components:{
    AlbumOne
  },
  data(){
    return{
      viewPager:[
          banner1,banner2, banner3,
      ]
    }
  },

}
</script>

<style scoped>
.index{
  margin-top: 20px;
  width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
.slider-show img{

}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.img-group{
  z-index: 10;

}
.img-group i{
  position: relative;
  bottom: 32px;
  right: -50px;
  color: white;
  z-index: 20;
}

.img-group i{
  background-color: black;
  opacity: 0.5;
}
.img-group .el-image{
  max-height: 300px;
  height: auto;
}
</style>